<template>
  <section
      id="scaleBox"
      class="scale-box"
      ref="scaleBox"
      :style="{width: `${width}px`,height: `${height}px`}"
  >
    <Layout></Layout>
  </section>
</template>

<script>
import {
  reactive,
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  nextTick,
} from "vue";
import Layout from "../Layout/Layout";
export default {
  name: "Transform",
  components: {
    Layout
  },
  setup() {

    const options = reactive({
      scale: 0,
      width: ~~import.meta.env.VITE_APP_VIEW_WIDTH,
      height: ~~import.meta.env.VITE_APP_VIEW_HEIGHT,
    });
    let listenView;

    onBeforeMount(() => {
      getScale();
    });

    onMounted(() => {
      setScale();
      window.addEventListener("resize", debounce(setScale,500))
    });

    onBeforeUpdate(() => {

    });

    onUpdated(() => {

    });

    onBeforeUnmount(() => {

    });

    onUnmounted(() => {
      window.removeEventListener('resize', debounce)
    });

    function debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      const _this = this;
      return function () {
        const args = arguments;

        if (timer) clearTimeout(timer);

        timer = setTimeout(function () {
          timer = null;
          fn.apply(_this, args);
        }, delays);
      }
    }

    function setScale() {
      options.scale = getScale();

      // region
      nextTick(() => {

        const dom = document.getElementById("scaleBox");
        dom.style.setProperty('--scaleX', options.scale[0]);
        dom.style.setProperty('--scaleY', options.scale[1]);
      })
      // endregion

    }

    function getScale() {
      const vw = window.innerWidth / options.width;
      const vh = window.innerHeight / options.height;

      return [ vw, vh ];
    }

    return {
      ...options,
    }
  }
}
</script>

<style scoped lang="scss">
.scale-box {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 0 0;
  transition: 0.3s;
  transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));
}
</style>
